<template>
    <!-- 人员管理-智能闸机-访客审批 -->
    <div class="empAudit">
        <div class="search">
            <div class="left">
                <Tabs
                    v-model="tabActiveName"
                    @on-click="setTabClick">
                    <TabPane
                        :label="`全部 （${allNum > 99 ? '99+' : allNum}）`"
                        name="-1"></TabPane>
                    <TabPane
                        :label="`待审批 （${pendingNum > 99 ? '99+' : pendingNum}）`"
                        name="0"></TabPane>
                    <TabPane
                        :label="`已通过 （${successNum > 99 ? '99+' : successNum}）`"
                        name="1"></TabPane>
                    <TabPane
                        :label="`已拒绝 （${failNum > 99 ? '99+' : failNum}）`"
                        name="2"></TabPane>
                </Tabs>
            </div>
            <div class="right">
                <div class="item">
                    <span style="margin-right: 8px">申请时间：</span>
                    <DatePicker
                        type="daterange"
                        :options="options"
                        :clearable="false"
                        v-model="dateArr"
                        v-if="inputShow"
                        format="yyyy-MM-dd"
                        placement="top"
                        transfer
                        placeholder="请选择日期"
                        style="width: 300px"
                        @on-change="getDateArr"></DatePicker>
                    <DatePicker
                        type="daterange"
                        format="yyyy-MM-dd"
                        placement="top"
                        placeholder="请选择日期"
                        v-if="inputShow"
                        style="opacity: 0; position: absolute; top: -9999px; width: 1px"></DatePicker>
                </div>
                <div
                    class="item"
                    style="margin-left: 20px"
                    v-if="btnList.includes('emp/audit/export')">
                    <el-button
                        type="primary"
                        @click="downLoad"
                        size="small"
                        plain
                        >导出</el-button
                    >
                </div>
            </div>
        </div>
        <div class="tabBox">
            <div class="tableList">
                <el-table
                    :data="list"
                    :stripe="true">
                    <el-table-column
                        prop="name"
                        label="访客姓名"
                        align="center"></el-table-column>
                    <el-table-column
                        prop="pictureUrl"
                        label="头像"
                        align="center"
                        width="80px">
                        <template slot-scope="scope">
                            <el-image
                                :src="scope.row.pictureUrl"
                                style="display: block; width: 30px; height: 30px; border-radius: 50%; margin: auto"
                                :preview-src-list="[scope.row.pictureUrl]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号"
                        align="center"></el-table-column>
                    <el-table-column
                        prop="faceGateName"
                        label="闸机名称"
                        align="center"></el-table-column>
                    <el-table-column
                        prop="remark"
                        label="申请说明"
                        align="left"
                        width="200px">
                        <template slot-scope="scope">
                            <Tooltip
                                transfer
                                :content="scope.row.remark ? scope.row.remark : '—'"
                                placement="top-start"
                                max-width="200">
                                <div
                                    class="p"
                                    style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer">
                                    {{ scope.row.remark ? scope.row.remark : "—" }}
                                </div>
                            </Tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="申请时间"
                        align="center"></el-table-column>
                    <el-table-column
                        prop="state"
                        label="状态"
                        align="center">
                        <template slot-scope="scope">
                            <p
                                v-if="scope.row.state === 0"
                                style="color: #ff4848">
                                待审批
                            </p>
                            <p
                                v-if="scope.row.state === 1"
                                style="color: #28d79c">
                                已通过
                            </p>
                            <p
                                v-if="scope.row.state === 2"
                                style="color: #a9b0bb">
                                已拒绝
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="checkName"
                        label="审批人"
                        align="center">
                        <template slot-scope="scope">
                            <p>{{ scope.row.checkName ? scope.row.checkName : "—" }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="checkTime"
                        label="审批时间"
                        align="center">
                        <template slot-scope="scope">
                            <p>{{ scope.row.checkTime ? scope.row.checkTime : "—" }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        align="center">
                        <template slot-scope="scope">
                            <el-button
                                :disabled="scope.row.state == 0 && btnList.includes('emp/audit/visitor') ? false : true"
                                @click="showVisitorFn(scope.$index, list)"
                                type="text"
                                size="small"
                                v-preventReClick="1500"
                                style="color: #0058f9"
                                >审批</el-button
                            >
                            <el-button
                                :disabled="btnList.includes('emp/audit/del') ? false : true"
                                @click="removeRow(scope.$index, list)"
                                type="text"
                                size="small"
                                v-preventReClick="1500"
                                style="color: #fb0035"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                 >
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="modal"
            width="610px"
            :mask-closable="false"
            title="访客审批"
            class-name="msgModal empMsgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span>申请信息</span>
                            <div
                                class="state"
                                v-if="state === 0"
                                style="color: #ff4848">
                                待审批
                            </div>
                            <div
                                class="state"
                                v-if="state === 1"
                                style="color: #28d79c">
                                已通过
                            </div>
                            <div
                                class="state"
                                v-if="state === 2"
                                style="color: #a9b0bb">
                                已拒绝
                            </div>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="list">
                            <div class="item">
                                <span class="span">访客姓名:</span>
                                <span class="span">{{ name ? name : "—" }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span class="span">申请时间:</span>
                                <span class="span">{{ createTime ? createTime : "—" }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span class="span">手机号:</span>
                                <span class="span">{{ phone ? phone : "—" }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span class="span">身份证号码:</span>
                                <span class="span">{{ idCardNo ? idCardNo : "—" }}</span>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <span class="span">申请说明:</span>
                                <div class="span">
                                    <Tooltip
                                        transfer
                                        :content="remark ? remark : '—'"
                                        placement="top-start"
                                        max-width="200">
                                        <div
                                            class="p"
                                            style="
                                                width: 150px;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                cursor: pointer;
                                                line-height: 14px;
                                            ">
                                            {{ remark ? remark : "—" }}
                                        </div>
                                    </Tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item operatorList">
                                <span class="span">闸机名称:</span>
                                <span class="span">{{ faceGateName ? faceGateName : "—" }}</span>
                            </div>
                        </div>
                        <div class="img">
                            <img
                                :src="pictureUrl"
                                alt="" />
                        </div>
                    </div>
                </div>
                <div
                    class="info"
                    style="margin-top: 20px">
                    <div class="title">
                        <h2>
                            <span>审批结果</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="list">
                            <div
                                class="item"
                                style="margin-bottom: 20px">
                                <span class="span">审批结果:</span>
                                <RadioGroup v-model="checkResult">
                                    <Radio
                                        label="1"
                                        style="width: 70px"
                                        >通过</Radio
                                    >
                                    <Radio
                                        label="2"
                                        style="width: 70px"
                                        >拒绝</Radio
                                    >
                                </RadioGroup>
                            </div>
                        </div>
                        <div
                            class="list"
                            style="margin-bottom: 20px">
                            ps：审批通过后，申请人可在2天内通过刷脸或扫码进出闸机
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(0)"
                    style="width: 88px; height: 34px; background: #89aff5; border-radius: 10px"
                    size="mini"
                    ><span style="color: #fff">取消</span>
                </el-button>
                <el-button
                    @click="ok"
                    type="primary"
                    style="width: 88px; height: 34px; background: #0058f9; border-radius: 10px"
                    size="mini"
                    v-preventReClick="1500"
                    ><span style="color: #fff">确定</span></el-button
                >
            </div>
        </Modal>
        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="deteleFn"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import { getEmpVisitorList, getEmpVisitorNum, getEmpVisitorCheck, getEmpVisitorExport, getEmpVisitorDel } from "@/api/api.js"
import { initYMD } from "@/sever/utils"
export default {
    data() {
        return {
            dateArr: [new Date(new Date().getTime() - 2592000000), new Date(new Date().getTime())],
            allNum: 0,
            pendingNum: 0,
            successNum: 0,
            failNum: 0,
            name: "",
            phone: "",
            idCardNo: "",
            createTime: "",
            remark: "",
            faceGateName: "",
            state: 0,
            checkResult: "1",
            visitorId: "",
            pictureUrl: "",
            btnList: [],
            tabActiveName: "-1",
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            list: [],
            flag: true,
            modal: false,
            deleteModal: false,
            inputShow: false,
            isAdd: false,
            deptId: "",
            stateId: -1,
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId
                this.pageNum = 1
                this.current = 1
                this.stateId = -1
                this.dateArr = [new Date(new Date().getTime() - 2592000000), new Date(new Date().getTime())]
                this.tabActiveName = "-1"
                this.getAllList()
                this.getEmpVisitorNumFn()
            }
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.getAllList()
        this.getEmpVisitorNumFn()
        this.btnList = JSON.parse(localStorage.getItem("arr"))
        setTimeout(() => {
            this.inputShow = true
        }, 1)
    },
    methods: {
        headClass() {
            return "color: #666666;background: #CCDEEE !important;"
        },
        downLoad() {
            let params = {
                deptId: this.deptId,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
                state: this.stateId == -1 ? "" : this.stateId,
            }
            getEmpVisitorExport(params)
                .then((res) => {
                    if (res.code == 200) {
                        window.open(res.data.path)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        setTabClick(name) {
            this.stateId = name
            this.pageNum = 1
            this.current = 1
            this.getAllList()
        },
        //获取列表
        getEmpVisitorNumFn() {
            let parmas = {
                deptId: this.deptId,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
            }
            getEmpVisitorNum(parmas)
                .then((res) => {
                    if (res.code == 200) {
                        this.allNum = res.data.allNum
                        this.pendingNum = res.data.pendingNum
                        this.successNum = res.data.successNum
                        this.failNum = res.data.failNum
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //获取列表
        getAllList() {
            let parmas = {
                deptId: this.deptId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                state: this.stateId == -1 ? "" : this.stateId,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
            }
            getEmpVisitorList(parmas)
                .then((res) => {
                    if (res.code == 200) {
                        this.totalCount = 0
                        this.list = res.data.list
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        showVisitorFn(index, arr) {
            this.modal = true
            this.name = arr[index].name
            this.phone = arr[index].phone
            this.idCardNo = arr[index].idCardNo
            this.createTime = arr[index].createTime
            this.remark = arr[index].remark
            this.faceGateName = arr[index].faceGateName
            this.state = arr[index].state
            this.visitorId = arr[index].visitorId
            this.pictureUrl = arr[index].pictureUrl
            this.checkResult = "1"
        },
        //删除授权人员
        removeRow(index, rows) {
            this.visitorId = rows[index].visitorId
            this.deleteModal = true
        },
        deteleFn() {
            getEmpVisitorDel(this.visitorId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.deleteModal = false
                        this.getAllList()
                        this.getEmpVisitorNumFn()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getDateArr(i, v) {
            this.dateArr = i
            this.getAllList()
            this.getEmpVisitorNumFn()
        },
        pageChange(index) {
            this.pageNum = index
            this.getAllList()
        },
        ok() {
            let parmas = {
                visitorId: this.visitorId,
                checkResult: this.checkResult,
            }
            getEmpVisitorCheck(parmas)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.pageNum = 1
                        this.current = 1
                        this.getAllList()
                        this.getEmpVisitorNumFn()
                        this.modal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        cancel(type) {
            if (type == 0) {
                this.modal = false
            } else if (type == 1) {
                this.Modal = false
            } else if (type == 2) {
                this.deleteModal = false
            }
        },
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../assets/style/emp/audit.scss";

.empAudit {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .search {
        width: 100%;
        margin-bottom: 10px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background: #fff;
        .left {
            width: 50%;
            /deep/ .ivu-tabs-bar {
                width: 100%;
                margin: 0 auto;
                border: none;
            }
            /deep/ .ivu-tabs-tab {
                box-sizing: border-box;
            }
        }
        .right {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }

        .list {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-right: 20px;
            margin-top: 20px;
            span {
                width: 90px;
            }
        }
    }
    .tabBox {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        .tableList {
            margin: auto;

            /deep/ .el-table {
                // color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf {
                    border-bottom: none;
                }
                tr {
                    border: none;
                }
                thead th {
                    font-weight: bold;
                }
            }
            /deep/ .el-table__row {
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
                background-color: #f5f5f5;
                cursor: pointer;
            }
        }
    }
}
.active {
    background: var(--themeColor) !important;
    border: var(--themeColor) !important;
    color: #fff !important;
}
#container2 {
    height: 100%;
}
#fenceMap2 {
    height: 100%;
}
/deep/.msgBox {
    .infoBox {
        position: relative;
        .img {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 200px;
            height: 200px;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
}
.ivu-date-picker-cells-cell-selected em,
.ivu-date-picker-cells-cell-selected:hover em {
    background: var(--themeColor) !important;
    color: #fff;
}
</style>
